<template>
    <div>
        <el-form :model="receptionQuery">
            <el-button style="float: right" icon="el-icon-lx-search" type="primary"  @click="selectPatient"></el-button>
            <el-input type="text" v-model="receptionQuery.name" placeholder="请输入姓名查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.phone" placeholder="请输入电话查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.idCard" placeholder="请输入身份证查询" style="float: right;width: 200px"></el-input>
            <el-button style="float: right" type="primary"  @click="clearselect">清空</el-button>
        </el-form>
        <el-table
                :data="Patients.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
            <el-table-column
                    label="用户id"
                    prop="id"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="性别"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.sex=='1'">男</p>
                    <p v-if="scope.row.sex=='2'">女</p>
                </template>
            </el-table-column>
            <el-table-column
                    label="年龄"
                    prop="age"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="身份证号"
                    prop="idcard"
            >
            </el-table-column>
            <el-table-column
                    label="电话号码"
                    prop="phone"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="地址"
                    align="center"
                    prop="address" width="220">
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-lx-text" @click="handleEdit(scope.$index, scope.row)">
                        缴费记录
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Patients.length"
            >
            </el-pagination>
        </center>
    </div>
</template>

<script>
    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "PatientCaseList",
        data(){
            var isNum = (rule, value, callback) => {
                const age= /^[0-9]*$/
                if (!age.test(value)) {
                    callback(new Error('年龄只能为数字'))
                }else{
                    callback()
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addPatient.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                Patients: [{
                    id: "",
                    idcard: "",
                    name: "",
                    phone: "",
                    password: "",
                    sex: 0,
                    age: 0,
                    loginName: "",
                    address: "",
                    deleted: 0,
                    gmtCreate: null,
                    gmtUpdate: null
                }],
                receptionQuery:{
                    idCard: "",
                    name: "",
                    phone: ""
                },
                currentPage:1, //初始页
                pagesize:9,    //    每页的数据
                type:'',

            }
        },
        created(){
            this.create();
        },

        activated(){
            this.create();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/patient-info/getAllPatient").then(resp=> {
                    this.Patients = resp.data.data.list;
                })
            },



            selectPatient(){
                axios.post("http://119.29.60.153:8001/doctorservice/patient-info/getPatients",this.receptionQuery).then(resp=> {
                    this.Patients=resp.data.data.list;
                })
            },


            clearselect(){
              this.receptionQuery={};
            },


            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;

            },

            handleEdit(index,row){
                localStorage.setItem('pid',row.id);
                localStorage.setItem('pname',row.name);
                this.$router.push({name:'GetDate',});
            }
        },
    }
</script>

<style scoped>

</style>